<template>
	<div class="endLive">
		<div class="endLiveCont">
			<image src="@/static/image/bg.png" mode="" class="bjImg" ></image>
			<div class="endLiveCenter">
				<div class="endLiveCont_back">
					<!-- <image src="@/static/image/left.png" mode=""></image> <span>热销商品榜</span> -->
					<u-navbar leftText="热销商品榜" @leftClick="backBtn" leftIconColor="#1D2129"  bgColor="transparent">
			        </u-navbar>
				</div>

			<!-- 	<div class="goHome">
					返回首页
				</div> -->
			</div>
		</div>
		<scroll-view @scrolltolower="scrolltolower" class="scrollView" :scroll-y="true" :scroll-with-animation="true">
			<div class="hotComItem" v-for="(ite,idx) in ProductSaleList" :key="idx">
				<div class="hotComItem_left">
					<image :src="ite.cover" mode=""></image>
					<div class="hotComItem_left_lable">
                        {{idx + 1}}
					</div>
				</div>
				<div class="hotComItem_right">
					<div class="hotComItem_right_top ex">
						{{ite.title}}
					</div>
					<div class="hotComItem_right_price">
						¥{{ite.price}}
					</div>
					<div class="hotComItem_right_bottom">
						<div class="hotComItem_right_bottom_left">
							销量：{{ite.payNum}}
						</div>
						<div class="hotComItem_right_bottom_right">
							销售额：{{ite.payAmount}}
						</div>
					</div>
				</div>
			</div>
			<div class="listSpace listSpaceCont" v-if="ProductSaleList.length <= 0 && loading">
				<list-space></list-space>
			</div>
			
			<div class="zj_space">
			
			</div>
			<div class="zj_space">
			
			</div>
		</scroll-view>
	</div>
</template>

<script>
	export default {
		data() {

			return {
				params: {
					liveId: '',
					page: 1,
					pageSize: 10,
					sortField: 'amount',
					sortMode: 'desc'
				},
				ProductSaleList: [],
				total:0,
				loading:false
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.ProductSaleList = []
			this.loading = false
			this.getListProductSale()
		},
		onLoad(opt) {
			if (opt.liveId) {
				this.params.liveId = opt.liveId
			}
			this.getListProductSale()
		},
		methods: {
			// 点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？
			scrolltolower(e) {
				if (this.ProductSaleList.length < this.total) {
					this.params.page++
					this.getListProductSale()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			// 获取直播商品数据
			async getListProductSale() {
				const {
					data
				} = await this.$request(this.$Api.listProductSale, this.params, "get")
				this.loading = true
				if(!data.data) return
				this.ProductSaleList = this.ProductSaleList.concat(data.data)
				this.total = data.total
				uni.stopPullDownRefresh()
			},
			backBtn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.listSpaceCont{
	padding-top: 70%;
}
	.scrollView {
		height: calc(100vh - 138rpx);
		background: red;
		position: absolute;
		top: 138rpx;
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 32rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		// padding-bottom: 200rpx;

		.hotComItem {
			width: 100%;
			height: 184rpx;
			background: #F7FAFF;
			border-radius: 14rpx;
			padding: 16rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.hotComItem_left {
				min-width: 150rpx;
				height: 150rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					background: #f5f5f5;
					border-radius: 8rpx;
				}

				.hotComItem_left_lable {
					width: 36rpx;
					height: 28rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 8rpx 0rpx 8rpx 0rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 0rpx;
					top: 0rpx;
				}
			}

			.hotComItem_right {
				margin-left: 24rpx;
			}

			.hotComItem_right_top {
				width: 440rpx;
				font-size: 28rpx;
				color: #464C5B;
				font-weight: 500;
			}

			.hotComItem_right_price {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #464C5B;
				font-weight: 500;
			}

			.hotComItem_right_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #8C8C8C;
				margin-top: 20rpx;
			}
		}
	}

	.endLiveCont {
		width: 100%;
		height: 100vh;
		position: relative;
		padding: 30rpx 0;
		box-sizing: border-box;
		color: #fff;
		overflow: hidden;



		.endLiveCenter {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
			padding: 30rpx 0;
			box-sizing: border-box;

		}

		.bjImg {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		.endLiveCont_back {
			width: 100%;
			height: 80rpx;
			float: left;
			position: relative;

			image {
				width: 58rpx;
				height: 58rpx;
				float: left;
				position: absolute;
				top: 10rpx;
			}

			span {
				font-size: 28rpx;
				margin-left: 72rpx;
				color: #1D2129;
				line-height: 80rpx;
			}
		}



		.goHome {
			width: 480rpx;
			height: 80rpx;
			background: #295EFF;
			border-radius: 40rpx;
			margin-top: 224rpx;
			margin: 224rpx auto;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			line-height: 80rpx;
		}
	}
</style>
